/* ============================================
   Thelma Ben Hair Atelier — Custom base styles
   ============================================ */




@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

* {
  font-family: 'Inter', sans-serif;
}

.serif {
  font-family: 'Playfair Display', serif;
}

.display {
  font-family: 'Cormorant Garamond', serif;
}

/* ============================================
   Thelma Ben Hair Atelier — Professional Base
   Mobile-first, clean, accessible
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,400&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --bg: #FAF7F2;
  --bg-soft: #F5EFE6;
  --ink: #1A1A1A;
  --ink-2: #3D3D3D;
  --ink-3: #6B6B6B;
  --line: #E8E0D6;
  --line-strong: #D9CFC0;
  --accent: #C9A86A;
  --accent-dark: #A88A52;
  --white: #FFFFFF;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --max-content: 720px;
  --max-wide: 1120px;
  --max-site: 1320px;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow-soft: 0 8px 30px rgba(26,26,26,0.06);
  --shadow-medium: 0 12px 40px rgba(26,26,26,0.10);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Utilities */
.serif { font-family: var(--font-serif); }
.display { font-family: var(--font-display); }
.container-wide {
  width: 100%;
  max-width: var(--max-site);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 640px) {
  .container-wide { padding-inline: 32px; }
}
@media (min-width: 1100px) {
  .container-wide { padding-inline: 40px; }
}

/* Announcement Bar */
.announcement {
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 20px;
  line-height: 1.4;
}
.announcement span.sep { opacity: 0.4; margin: 0 8px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250,247,242,0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 640px) {
  .site-header-inner { height: 72px; }
}
.logo {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.18em;
  line-height: 1;
}
@media (min-width: 640px) { .logo { font-size: 20px; } }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 4px;
  min-height: 44px;
  transition: color 0.2s ease;
}
.back-link:hover { color: var(--accent); }

/* Reading Progress */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 100;
  background: transparent;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.1s linear;
}

/* Article Header */
.article-header {
  max-width: var(--max-content);
  margin-inline: auto;
  padding: 40px 20px 0;
}
@media (min-width: 640px) {
  .article-header { padding: 64px 32px 0; }
}
@media (min-width: 1100px) {
  .article-header { padding-inline: 0; }
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 20px;
}
.article-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 8vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin-bottom: 20px;
  text-wrap: balance;
}
.article-dek {
  font-size: clamp(16px, 3.5vw, 18px);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 620px;
  margin-bottom: 32px;
}
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.byline-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
  flex-shrink: 0;
}
.byline-avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline-dot { width: 1px; height: 12px; background: var(--line-strong); }

/* Hero */
.article-hero {
  max-width: var(--max-wide);
  margin: 40px auto;
  padding-inline: 20px;
}
@media (min-width: 640px) {
  .article-hero { margin: 48px auto 64px; padding-inline: 32px; }
}
@media (min-width: 1100px) {
  .article-hero { padding-inline: 0; }
}
.hero-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
  position: relative;
  aspect-ratio: 16/10;
}
@media (min-width: 640px) { .hero-wrap { aspect-ratio: 16/9; border-radius: 28px; } }
@media (min-width: 1024px) { .hero-wrap { aspect-ratio: 2/1; } }
.hero-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-caption {
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Article Body */
.article-body {
  max-width: var(--max-content);
  margin-inline: auto;
  padding: 0 20px 32px;
}
@media (min-width: 640px) { .article-body { padding: 0 32px 48px; } }
@media (min-width: 1100px) { .article-body { padding-inline: 0; } }

.prose {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-2);
}
@media (max-width: 640px) { .prose { font-size: 16px; line-height: 1.8; } }
.prose p { margin-bottom: 24px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--ink); }

.h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 56px 0 20px;
  text-wrap: balance;
}
.h2:first-child { margin-top: 0; }

/* Callout */
.callout {
  margin: 40px 0;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius-md);
  padding: 28px 24px;
}
@media (min-width: 640px) { .callout { padding: 32px 36px; border-radius: 20px; } }
.callout-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
  font-weight: 500;
}
.callout p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
}

/* Checklist */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.checklist li {
  display: flex;
  gap: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}
.checklist-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  margin-top: 10px;
  flex-shrink: 0;
}

/* Closing */
.closing {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-2);
  font-style: italic;
  font-family: var(--font-display);
}

/* CTA */
.cta {
  margin-top: 56px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 640px) {
  .cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 40px 40px;
    border-radius: 24px;
  }
}
.cta-kicker {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 12px;
}
.cta-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.1;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-height: 48px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.btn-primary:hover {
  background: var(--accent);
  color: var(--ink);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .btn-primary { width: 100%; }
}

/* Related */
.related {
  max-width: var(--max-wide);
  margin-inline: auto;
  padding: 64px 20px;
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) { .related { padding: 96px 32px; } }
@media (min-width: 1100px) { .related { padding-inline: 0; } }
.related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.related-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.1;
}
.related-link {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
}
.related-link:hover { color: var(--ink); }

.related-grid {
  display: grid;
  gap: 24px;
}
@media (min-width: 640px) { .related-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.related-card { display: block; group: card; }
.related-thumb {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--line);
  margin-bottom: 16px;
}
.related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.related-card:hover .related-thumb img { transform: scale(1.04); }
.related-card h4 {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.25;
  transition: color 0.2s;
}
.related-card:hover h4 { color: var(--accent); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 0;
  background: transparent;
}
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 640px) {
  .footer-grid { flex-direction: row; justify-content: space-between; }
}
.footer-brand { max-width: 340px; }
.footer-logo {
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.footer-desc {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
}
.footer-meta {
  display: flex;
  gap: 40px;
  font-size: 12px;
}
.footer-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.6;
  margin-bottom: 12px;
  font-weight: 500;
}
.footer-links { display: grid; gap: 6px; color: var(--ink-2); }
.footer-bottom {
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.7;
}
.footer-bottom span:last-child { display: none; }
@media (min-width: 640px) { .footer-bottom span:last-child { display: inline; } }

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Focus & Accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Mobile Menu (kept for compatibility) */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu.menu-open { max-height: 480px; }
.mobile-menu-inner {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;
}
.mobile-menu.menu-open .mobile-menu-inner {
  opacity: 1;
  transform: translateY(0);
}


/* Scroll-reveal animation: elements start hidden/offset, then fade+rise
   into place when script.js adds the "in-view" class (see IntersectionObserver
   in script.js). */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mobile menu: animated slide-down panel.
   .mobile-menu grows/shrinks via max-height so the reveal is smooth;
   .mobile-menu-inner fades and slides in slightly after, so content
   doesn't feel like it's being cut off mid-animation. */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.menu-open {
  max-height: 480px;
}

.mobile-menu-inner {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;
}

.mobile-menu.menu-open .mobile-menu-inner {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Tailwind utility classes (compiled)
   ============================================ */

*,:after,:before {
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x:;
  --tw-pan-y:;
  --tw-pinch-zoom:;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position:;
  --tw-gradient-via-position:;
  --tw-gradient-to-position:;
  --tw-ordinal:;
  --tw-slashed-zero:;
  --tw-numeric-figure:;
  --tw-numeric-spacing:;
  --tw-numeric-fraction:;
  --tw-ring-inset:;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgba(59,130,246,.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur:;
  --tw-brightness:;
  --tw-contrast:;
  --tw-grayscale:;
  --tw-hue-rotate:;
  --tw-invert:;
  --tw-saturate:;
  --tw-sepia:;
  --tw-drop-shadow:;
  --tw-backdrop-blur:;
  --tw-backdrop-brightness:;
  --tw-backdrop-contrast:;
  --tw-backdrop-grayscale:;
  --tw-backdrop-hue-rotate:;
  --tw-backdrop-invert:;
  --tw-backdrop-opacity:;
  --tw-backdrop-saturate:;
  --tw-backdrop-sepia:;
  --tw-contain-size:;
  --tw-contain-layout:;
  --tw-contain-paint:;
  --tw-contain-style:;
}
::backdrop {
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x:;
  --tw-pan-y:;
  --tw-pinch-zoom:;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position:;
  --tw-gradient-via-position:;
  --tw-gradient-to-position:;
  --tw-ordinal:;
  --tw-slashed-zero:;
  --tw-numeric-figure:;
  --tw-numeric-spacing:;
  --tw-numeric-fraction:;
  --tw-ring-inset:;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgba(59,130,246,.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur:;
  --tw-brightness:;
  --tw-contrast:;
  --tw-grayscale:;
  --tw-hue-rotate:;
  --tw-invert:;
  --tw-saturate:;
  --tw-sepia:;
  --tw-drop-shadow:;
  --tw-backdrop-blur:;
  --tw-backdrop-brightness:;
  --tw-backdrop-contrast:;
  --tw-backdrop-grayscale:;
  --tw-backdrop-hue-rotate:;
  --tw-backdrop-invert:;
  --tw-backdrop-opacity:;
  --tw-backdrop-saturate:;
  --tw-backdrop-sepia:;
  --tw-contain-size:;
  --tw-contain-layout:;
  --tw-contain-paint:;
  --tw-contain-style:;
}
/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before {
  box-sizing:border-box;
  border:0 solid #e5e7eb;
}
:after,:before {
  --tw-content:"";
}
:host,html {
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  -moz-tab-size:4;
  -o-tab-size:4;
  tab-size:4;
  font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  font-feature-settings:normal;
  font-variation-settings:normal;
  -webkit-tap-highlight-color:transparent;
}
body {
  line-height:inherit;
}
hr {
  height:0;
  color:inherit;
  border-top-width:1px;
}
abbr:where([title]) {
  -webkit-text-decoration:underline dotted;
  text-decoration:underline dotted;
}
h1,h2,h3,h4,h5,h6 {
  font-size:inherit;
  font-weight:inherit;
}
a {
  color:inherit;
  text-decoration:inherit;
}
b,strong {
  font-weight:bolder;
}
code,kbd,pre,samp {
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  font-feature-settings:normal;
  font-variation-settings:normal;
  font-size:1em;
}
small {
  font-size:80%;
}
sub,sup {
  font-size:75%;
  line-height:0;
  position:relative;
  vertical-align:baseline;
}
sub {
  bottom:-.25em;
}
sup {
  top:-.5em;
}
table {
  text-indent:0;
  border-color:inherit;
  border-collapse:collapse;
}
button,input,optgroup,select,textarea {
  font-family:inherit;
  font-feature-settings:inherit;
  font-variation-settings:inherit;
  font-size:100%;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  color:inherit;
  margin:0;
  padding:0;
}
button,select {
  text-transform:none;
}
button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
  -webkit-appearance:button;
  background-color:transparent;
  background-image:none;
}
:-moz-focusring {
  outline:auto;
}
:-moz-ui-invalid {
  box-shadow:none;
}
progress {
  vertical-align:baseline;
}
::-webkit-inner-spin-button,::-webkit-outer-spin-button {
  height:auto;
}
[type=search] {
  -webkit-appearance:textfield;
  outline-offset:-2px;
}
::-webkit-search-decoration {
  -webkit-appearance:none;
}
::-webkit-file-upload-button {
  -webkit-appearance:button;
  font:inherit;
}
summary {
  display:list-item;
}
blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
  margin:0;
}
fieldset {
  margin:0;
}
fieldset,legend {
  padding:0;
}
menu,ol,ul {
  list-style:none;
  margin:0;
  padding:0;
}
dialog {
  padding:0;
}
textarea {
  resize:vertical;
}
input::-moz-placeholder,textarea::-moz-placeholder {
  opacity:1;
  color:#9ca3af;
}
input::placeholder,textarea::placeholder {
  opacity:1;
  color:#9ca3af;
}
[role=button],button {
  cursor:pointer;
}
:disabled {
  cursor:default;
}
audio,canvas,embed,iframe,img,object,svg,video {
  display:block;
  vertical-align:middle;
}
img,video {
  max-width:100%;
  height:auto;
}
[hidden]:where(:not([hidden=until-found])) {
  display:none;
}
.container {
  width:100%;
}
@media (min-width:640px) {
  .container {
    max-width:640px;
  }
}
@media (min-width:768px) {
  .container {
    max-width:768px;
  }
}
@media (min-width:1024px) {
  .container {
    max-width:1024px;
  }
}
@media (min-width:1280px) {
  .container {
    max-width:1280px;
  }
}
@media (min-width:1536px) {
  .container {
    max-width:1536px;
  }
}
.pointer-events-none {
  pointer-events:none;
}
.absolute {
  position:absolute;
}
.relative {
  position:relative;
}
.sticky {
  position:sticky;
}
.inset-0 {
  inset:0;
}
.inset-x-0 {
  left:0;
  right:0;
}
.-bottom-1 {
  bottom:-.25rem;
}
.-bottom-16 {
  bottom:-4rem;
}
.-bottom-6 {
  bottom:-1.5rem;
}
.-left-10 {
  left:-2.5rem;
}
.-left-4 {
  left:-1rem;
}
.-right-6 {
  right:-1.5rem;
}
.-top-6 {
  top:-1.5rem;
}
.bottom-0 {
  bottom:0;
}
.left-0 {
  left:0;
}
.left-3 {
  left:.75rem;
}
.left-6 {
  left:1.5rem;
}
.top-0 {
  top:0;
}
.top-3 {
  top:.75rem;
}
.top-6 {
  top:1.5rem;
}
.z-10 {
  z-index:10;
}
.z-40 {
  z-index:40;
}
.mx-2 {
  margin-left:.5rem;
  margin-right:.5rem;
}
.mx-3 {
  margin-left:.75rem;
  margin-right:.75rem;
}
.mx-auto {
  margin-left:auto;
  margin-right:auto;
}
.mb-12 {
  margin-bottom:3rem;
}
.mb-2 {
  margin-bottom:.5rem;
}
.mb-2\.5 {
  margin-bottom:.625rem;
}
.mb-3 {
  margin-bottom:.75rem;
}
.mb-4 {
  margin-bottom:1rem;
}
.mb-5 {
  margin-bottom:1.25rem;
}
.mb-6 {
  margin-bottom:1.5rem;
}
.mb-8 {
  margin-bottom:2rem;
}
.mt-1 {
  margin-top:.25rem;
}
.mt-10 {
  margin-top:2.5rem;
}
.mt-2 {
  margin-top:.5rem;
}
.mt-3 {
  margin-top:.75rem;
}
.mt-4 {
  margin-top:1rem;
}
.mt-6 {
  margin-top:1.5rem;
}
.mt-8 {
  margin-top:2rem;
}
.line-clamp-2 {
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.block {
  display:block;
}
.inline-block {
  display:inline-block;
}
.flex {
  display:flex;
}
.inline-flex {
  display:inline-flex;
}
.grid {
  display:grid;
}
.hidden {
  display:none;
}
.aspect-\[4\/3\] {
  aspect-ratio:4/3;
}
.aspect-\[4\/5\] {
  aspect-ratio:4/5;
}
.h-1 {
  height:.25rem;
}
.h-10 {
  height:2.5rem;
}
.h-12 {
  height:3rem;
}
.h-3 {
  height:.75rem;
}
.h-6 {
  height:1.5rem;
}
.h-9 {
  height:2.25rem;
}
.h-\[220px\] {
  height:220px;
}
.h-\[32px\] {
  height:32px;
}
.h-\[40px\] {
  height:40px;
}
.h-\[420px\] {
  height:420px;
}
.h-\[44px\] {
  height:44px;
}
.h-\[46px\] {
  height:46px;
}
.h-\[48px\] {
  height:48px;
}
.h-\[64px\] {
  height:64px;
}
.h-\[88px\] {
  height:88px;
}
.h-fit {
  height:-moz-fit-content;
  height:fit-content;
}
.h-full {
  height:100%;
}
.h-px {
  height:1px;
}
.min-h-\[220px\] {
  min-height:220px;
}
.min-h-screen {
  min-height:100vh;
}
.w-0 {
  width:0;
}
.w-1 {
  width:.25rem;
}
.w-10 {
  width:2.5rem;
}
.w-12 {
  width:3rem;
}
.w-5 {
  width:1.25rem;
}
.w-6 {
  width:1.5rem;
}
.w-8 {
  width:2rem;
}
.w-9 {
  width:2.25rem;
}
.w-\[320px\] {
  width:320px;
}
.w-\[88px\] {
  width:88px;
}
.w-full {
  width:100%;
}
.w-px {
  width:1px;
}
.max-w-\[1320px\] {
  max-width:1320px;
}
.max-w-\[240px\] {
  max-width:240px;
}
.max-w-\[300px\] {
  max-width:300px;
}
.max-w-\[320px\] {
  max-width:320px;
}
.max-w-\[380px\] {
  max-width:380px;
}
.max-w-\[420px\] {
  max-width:420px;
}
.max-w-\[440px\] {
  max-width:440px;
}
.max-w-\[460px\] {
  max-width:460px;
}
.max-w-\[520px\] {
  max-width:520px;
}
.flex-1 {
  flex:1 1 0%;
}
.\!translate-y-0 {
  --tw-translate-y:0px!important;
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important;
}
.-translate-y-\[3\.5px\] {
  --tw-translate-y:-3.5px;
}
.-translate-y-\[3\.5px\],.translate-y-\[3\.5px\] {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[3\.5px\] {
  --tw-translate-y:3.5px;
}
.-rotate-45 {
  --tw-rotate:-45deg;
}
.-rotate-45,.rotate-45 {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate:45deg;
}
.transform {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
  cursor:pointer;
}
.grid-cols-2 {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.grid-cols-3 {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.flex-col {
  flex-direction:column;
}
.items-start {
  align-items:flex-start;
}
.items-center {
  align-items:center;
}
.items-baseline {
  align-items:baseline;
}
.justify-center {
  justify-content:center;
}
.justify-between {
  justify-content:space-between;
}
.gap-1 {
  gap:.25rem;
}
.gap-1\.5 {
  gap:.375rem;
}
.gap-10 {
  gap:2.5rem;
}
.gap-12 {
  gap:3rem;
}
.gap-2 {
  gap:.5rem;
}
.gap-3 {
  gap:.75rem;
}
.gap-4 {
  gap:1rem;
}
.gap-6 {
  gap:1.5rem;
}
.gap-8 {
  gap:2rem;
}
.gap-\[1px\] {
  gap:1px;
}
.space-y-1>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(.25rem*var(--tw-space-y-reverse));
}
.space-y-1\.5>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(.375rem*var(--tw-space-y-reverse));
}
.space-y-2>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(.5rem*var(--tw-space-y-reverse));
}
.space-y-5>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1.25rem*var(--tw-space-y-reverse));
}
.divide-x>:not([hidden])~:not([hidden]) {
  --tw-divide-x-reverse:0;
  border-right-width:calc(1px*var(--tw-divide-x-reverse));
  border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)));
}
.divide-y>:not([hidden])~:not([hidden]) {
  --tw-divide-y-reverse:0;
  border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(1px*var(--tw-divide-y-reverse));
}
.divide-\[\#E8E0D6\]>:not([hidden])~:not([hidden]) {
  --tw-divide-opacity:1;
  border-color:rgb(232 224 214/var(--tw-divide-opacity,1));
}
.self-start {
  align-self:flex-start;
}
.overflow-hidden {
  overflow:hidden;
}
.overflow-x-auto {
  overflow-x:auto;
}
.whitespace-nowrap {
  white-space:nowrap;
}
.rounded-\[14px\] {
  border-radius:14px;
}
.rounded-\[16px\] {
  border-radius:16px;
}
.rounded-\[20px\] {
  border-radius:20px;
}
.rounded-full {
  border-radius:9999px;
}
.border {
  border-width:1px;
}
.border-y {
  border-top-width:1px;
}
.border-b,.border-y {
  border-bottom-width:1px;
}
.border-t {
  border-top-width:1px;
}
.border-dashed {
  border-style:dashed;
}
.border-\[\#1A1A1A\] {
  --tw-border-opacity:1;
  border-color:rgb(26 26 26/var(--tw-border-opacity,1));
}
.border-\[\#E8E0D6\] {
  --tw-border-opacity:1;
  border-color:rgb(232 224 214/var(--tw-border-opacity,1));
}
.border-white\/20 {
  border-color:hsla(0,0%,100%,.2);
}
.bg-\[\#1A1A1A\] {
  --tw-bg-opacity:1;
  background-color:rgb(26 26 26/var(--tw-bg-opacity,1));
}
.bg-\[\#C9A86A\] {
  --tw-bg-opacity:1;
  background-color:rgb(201 168 106/var(--tw-bg-opacity,1));
}
.bg-\[\#E8E0D6\] {
  --tw-bg-opacity:1;
  background-color:rgb(232 224 214/var(--tw-bg-opacity,1));
}
.bg-\[\#FAF7F2\] {
  --tw-bg-opacity:1;
  background-color:rgb(250 247 242/var(--tw-bg-opacity,1));
}
.bg-\[\#FAF7F2\]\/80 {
  background-color:hsla(38,44%,96%,.8);
}
.bg-\[\#FAF7F2\]\/90 {
  background-color:hsla(38,44%,96%,.9);
}
.bg-white {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255/var(--tw-bg-opacity,1));
}
.bg-white\/20 {
  background-color:hsla(0,0%,100%,.2);
}
.bg-white\/40 {
  background-color:hsla(0,0%,100%,.4);
}
.bg-white\/50 {
  background-color:hsla(0,0%,100%,.5);
}
.bg-gradient-to-t {
  background-image:linear-gradient(to top,var(--tw-gradient-stops));
}
.from-black\/15 {
  --tw-gradient-from:rgba(0,0,0,.15) var(--tw-gradient-from-position);
  --tw-gradient-to:transparent var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
}
.from-black\/50 {
  --tw-gradient-from:rgba(0,0,0,.5) var(--tw-gradient-from-position);
  --tw-gradient-to:transparent var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to:transparent var(--tw-gradient-to-position);
}
.object-cover {
  -o-object-fit:cover;
  object-fit:cover;
}
.object-top {
  -o-object-position:top;
  object-position:top;
}
.p-1 {
  padding:.25rem;
}
.p-6 {
  padding:1.5rem;
}
.p-8 {
  padding:2rem;
}
.px-2\.5 {
  padding-left:.625rem;
  padding-right:.625rem;
}
.px-3 {
  padding-left:.75rem;
  padding-right:.75rem;
}
.px-4 {
  padding-left:1rem;
  padding-right:1rem;
}
.px-5 {
  padding-left:1.25rem;
  padding-right:1.25rem;
}
.px-6 {
  padding-left:1.5rem;
  padding-right:1.5rem;
}
.px-7 {
  padding-left:1.75rem;
  padding-right:1.75rem;
}
.py-1 {
  padding-top:.25rem;
  padding-bottom:.25rem;
}
.py-10 {
  padding-top:2.5rem;
  padding-bottom:2.5rem;
}
.py-12 {
  padding-top:3rem;
  padding-bottom:3rem;
}
.py-14 {
  padding-top:3.5rem;
  padding-bottom:3.5rem;
}
.py-16 {
  padding-top:4rem;
  padding-bottom:4rem;
}
.py-2\.5 {
  padding-top:.625rem;
  padding-bottom:.625rem;
}
.py-20 {
  padding-top:5rem;
  padding-bottom:5rem;
}
.py-4 {
  padding-top:1rem;
  padding-bottom:1rem;
}
.py-5 {
  padding-top:1.25rem;
  padding-bottom:1.25rem;
}
.py-6 {
  padding-top:1.5rem;
  padding-bottom:1.5rem;
}
.py-8 {
  padding-top:2rem;
  padding-bottom:2rem;
}
.pb-0\.5 {
  padding-bottom:.125rem;
}
.pb-1 {
  padding-bottom:.25rem;
}
.pb-10 {
  padding-bottom:2.5rem;
}
.pb-16 {
  padding-bottom:4rem;
}
.pt-10 {
  padding-top:2.5rem;
}
.pt-2 {
  padding-top:.5rem;
}
.pt-6 {
  padding-top:1.5rem;
}
.pt-8 {
  padding-top:2rem;
}
.text-left {
  text-align:left;
}
.text-center {
  text-align:center;
}
.text-\[10px\] {
  font-size:10px;
}
.text-\[11px\] {
  font-size:11px;
}
.text-\[12px\] {
  font-size:12px;
}
.text-\[13px\] {
  font-size:13px;
}
.text-\[14px\] {
  font-size:14px;
}
.text-\[15px\] {
  font-size:15px;
}
.text-\[16px\] {
  font-size:16px;
}
.text-\[18px\] {
  font-size:18px;
}
.text-\[20px\] {
  font-size:20px;
}
.text-\[22px\] {
  font-size:22px;
}
.text-\[24px\] {
  font-size:24px;
}
.text-\[26px\] {
  font-size:26px;
}
.text-\[28px\] {
  font-size:28px;
}
.text-\[30px\] {
  font-size:30px;
}
.text-\[32px\] {
  font-size:32px;
}
.text-\[34px\] {
  font-size:34px;
}
.text-\[44px\] {
  font-size:44px;
}
.text-\[52px\] {
  font-size:52px;
}
.text-\[54px\] {
  font-size:54px;
}
.text-\[80px\] {
  font-size:80px;
}
.text-\[8px\] {
  font-size:8px;
}
.text-\[9px\] {
  font-size:9px;
}
.font-\[300\] {
  font-weight:300;
}
.font-\[500\] {
  font-weight:500;
}
.font-\[600\] {
  font-weight:600;
}
.uppercase {
  text-transform:uppercase;
}
.italic {
  font-style:italic;
}
.leading-\[0\.92\] {
  line-height:.92;
}
.leading-\[0\.95\] {
  line-height:.95;
}
.leading-\[0\.9\] {
  line-height:.9;
}
.leading-\[1\.15\] {
  line-height:1.15;
}
.leading-\[1\.1\] {
  line-height:1.1;
}
.leading-\[1\.25\] {
  line-height:1.25;
}
.leading-\[1\.2\] {
  line-height:1.2;
}
.leading-\[1\.4\] {
  line-height:1.4;
}
.leading-\[1\.5\] {
  line-height:1.5;
}
.leading-\[1\.6\] {
  line-height:1.6;
}
.leading-\[1\.7\] {
  line-height:1.7;
}
.leading-\[1\.8\] {
  line-height:1.8;
}
.leading-none {
  line-height:1;
}
.tracking-\[-0\.01em\] {
  letter-spacing:-.01em;
}
.tracking-\[-0\.02em\] {
  letter-spacing:-.02em;
}
.tracking-\[0\.01em\] {
  letter-spacing:.01em;
}
.tracking-\[0\.02em\] {
  letter-spacing:.02em;
}
.tracking-\[0\.08em\] {
  letter-spacing:.08em;
}
.tracking-\[0\.12em\] {
  letter-spacing:.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing:.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing:.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing:.18em;
}
.tracking-\[0\.22em\] {
  letter-spacing:.22em;
}
.tracking-\[0\.2em\] {
  letter-spacing:.2em;
}
.text-\[\#1A1A1A\] {
  --tw-text-opacity:1;
  color:rgb(26 26 26/var(--tw-text-opacity,1));
}
.text-\[\#1A1A1A\]\/60 {
  color:rgba(26,26,26,.6);
}
.text-\[\#1A1A1A\]\/70 {
  color:rgba(26,26,26,.7);
}
.text-\[\#1A1A1A\]\/80 {
  color:rgba(26,26,26,.8);
}
.text-\[\#C9A86A\] {
  --tw-text-opacity:1;
  color:rgb(201 168 106/var(--tw-text-opacity,1));
}
.text-\[\#FAF7F2\] {
  --tw-text-opacity:1;
  color:rgb(250 247 242/var(--tw-text-opacity,1));
}
.text-white {
  --tw-text-opacity:1;
  color:rgb(255 255 255/var(--tw-text-opacity,1));
}
.antialiased {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.\!opacity-100 {
  opacity:1!important;
}
.opacity-20 {
  opacity:.2;
}
.opacity-40 {
  opacity:.4;
}
.opacity-50 {
  opacity:.5;
}
.opacity-60 {
  opacity:.6;
}
.opacity-70 {
  opacity:.7;
}
.opacity-75 {
  opacity:.75;
}
.opacity-\[0\.06\] {
  opacity:.06;
}
.opacity-\[0\.08\] {
  opacity:.08;
}
.shadow-\[0_20px_60px_rgba\(26\2c 26\2c 26\2c 0\.08\)\] {
  --tw-shadow:0 20px 60px rgba(26,26,26,.08);
  --tw-shadow-colored:0 20px 60px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
.outline-none {
  outline:2px solid transparent;
  outline-offset:2px;
}
.grayscale {
  --tw-grayscale:grayscale(100%);
}
.filter,.grayscale {
  filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur:blur(8px);
}
.backdrop-blur,.backdrop-blur-xl {
  backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl {
  --tw-backdrop-blur:blur(24px);
}
.transition {
  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.15s;
}
.transition-all {
  transition-property:all;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.15s;
}
.transition-colors {
  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.15s;
}
.transition-transform {
  transition-property:transform;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.15s;
}
.duration-300 {
  transition-duration:.3s;
}
.duration-500 {
  transition-duration:.5s;
}
.duration-700 {
  transition-duration:.7s;
}
.duration-\[1\.8s\] {
  transition-duration:1.8s;
}
.ease-out {
  transition-timing-function:cubic-bezier(0,0,.2,1);
}
#root,body,html {
  min-height:100%;
}
body {
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
}
[role=button]:not([aria-disabled=true]),button:not(:disabled),label[for],select:not(:disabled),summary {
  cursor:pointer;
}
.selection\:bg-\[\#C9A86A\]\/30 ::-moz-selection {
  background-color:hsla(39,47%,60%,.3);
}
.selection\:bg-\[\#C9A86A\]\/30 ::selection {
  background-color:hsla(39,47%,60%,.3);
}
.selection\:bg-\[\#C9A86A\]\/30::-moz-selection {
  background-color:hsla(39,47%,60%,.3);
}
.selection\:bg-\[\#C9A86A\]\/30::selection {
  background-color:hsla(39,47%,60%,.3);
}
.placeholder\:opacity-40::-moz-placeholder {
  opacity:.4;
}
.placeholder\:opacity-40::placeholder {
  opacity:.4;
}
.hover\:border-\[\#C9A86A\]:hover {
  --tw-border-opacity:1;
  border-color:rgb(201 168 106/var(--tw-border-opacity,1));
}
.hover\:bg-\[\#1A1A1A\]:hover {
  --tw-bg-opacity:1;
  background-color:rgb(26 26 26/var(--tw-bg-opacity,1));
}
.hover\:bg-\[\#C9A86A\]:hover {
  --tw-bg-opacity:1;
  background-color:rgb(201 168 106/var(--tw-bg-opacity,1));
}
.hover\:bg-\[\#E8E0D6\]\/60:hover {
  background-color:hsla(33,28%,87%,.6);
}
.hover\:bg-white:hover {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255/var(--tw-bg-opacity,1));
}
.hover\:text-\[\#1A1A1A\]:hover {
  --tw-text-opacity:1;
  color:rgb(26 26 26/var(--tw-text-opacity,1));
}
.hover\:text-\[\#C9A86A\]:hover {
  --tw-text-opacity:1;
  color:rgb(201 168 106/var(--tw-text-opacity,1));
}
.hover\:text-\[\#FAF7F2\]:hover {
  --tw-text-opacity:1;
  color:rgb(250 247 242/var(--tw-text-opacity,1));
}
.hover\:opacity-100:hover {
  opacity:1;
}
.focus\:border-\[\#C9A86A\]:focus {
  --tw-border-opacity:1;
  border-color:rgb(201 168 106/var(--tw-border-opacity,1));
}
.group:hover .group-hover\:w-full {
  width:100%;
}
.group:hover .group-hover\:scale-\[1\.03\] {
  --tw-scale-x:1.03;
  --tw-scale-y:1.03;
}
.group:hover .group-hover\:scale-\[1\.03\],.group:hover .group-hover\:scale-\[1\.04\] {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.04\] {
  --tw-scale-x:1.04;
  --tw-scale-y:1.04;
}
.group:hover .group-hover\:border-\[\#1A1A1A\] {
  --tw-border-opacity:1;
  border-color:rgb(26 26 26/var(--tw-border-opacity,1));
}
.group:hover .group-hover\:bg-\[\#C9A86A\] {
  --tw-bg-opacity:1;
  background-color:rgb(201 168 106/var(--tw-bg-opacity,1));
}
.group:hover .group-hover\:text-\[\#C9A86A\] {
  --tw-text-opacity:1;
  color:rgb(201 168 106/var(--tw-text-opacity,1));
}
@media (min-width:640px) {
  .sm\:-left-8 {
    left:-2rem;
  }
  .sm\:mx-6 {
    margin-left:1.5rem;
    margin-right:1.5rem;
  }
  .sm\:mb-16 {
    margin-bottom:4rem;
  }
  .sm\:inline {
    display:inline;
  }
  .sm\:flex {
    display:flex;
  }
  .sm\:inline-flex {
    display:inline-flex;
  }
  .sm\:aspect-\[4\/5\] {
    aspect-ratio:4/5;
  }
  .sm\:h-\[560px\] {
    height:560px;
  }
  .sm\:h-\[72px\] {
    height:72px;
  }
  .sm\:grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .sm\:flex-row {
    flex-direction:row;
  }
  .sm\:items-start {
    align-items:flex-start;
  }
  .sm\:items-end {
    align-items:flex-end;
  }
  .sm\:items-center {
    align-items:center;
  }
  .sm\:divide-x>:not([hidden])~:not([hidden]) {
    --tw-divide-x-reverse:0;
    border-right-width:calc(1px*var(--tw-divide-x-reverse));
    border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)));
  }
  .sm\:divide-y-0>:not([hidden])~:not([hidden]) {
    --tw-divide-y-reverse:0;
    border-top-width:calc(0px*(1 - var(--tw-divide-y-reverse)));
    border-bottom-width:calc(0px*var(--tw-divide-y-reverse));
  }
  .sm\:rounded-\[28px\] {
    border-radius:28px;
  }
  .sm\:p-12 {
    padding:3rem;
  }
  .sm\:p-7 {
    padding:1.75rem;
  }
  .sm\:px-10 {
    padding-left:2.5rem;
    padding-right:2.5rem;
  }
  .sm\:px-6 {
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
  .sm\:px-8 {
    padding-left:2rem;
    padding-right:2rem;
  }
  .sm\:py-10 {
    padding-top:2.5rem;
    padding-bottom:2.5rem;
  }
  .sm\:py-12 {
    padding-top:3rem;
    padding-bottom:3rem;
  }
  .sm\:py-16 {
    padding-top:4rem;
    padding-bottom:4rem;
  }
  .sm\:py-20 {
    padding-top:5rem;
    padding-bottom:5rem;
  }
  .sm\:py-24 {
    padding-top:6rem;
    padding-bottom:6rem;
  }
  .sm\:py-5 {
    padding-top:1.25rem;
    padding-bottom:1.25rem;
  }
  .sm\:pb-24 {
    padding-bottom:6rem;
  }
  .sm\:pr-8 {
    padding-right:2rem;
  }
  .sm\:pt-10 {
    padding-top:2.5rem;
  }
  .sm\:pt-16 {
    padding-top:4rem;
  }
  .sm\:text-right {
    text-align:right;
  }
  .sm\:text-\[11px\] {
    font-size:11px;
  }
  .sm\:text-\[17px\] {
    font-size:17px;
  }
  .sm\:text-\[20px\] {
    font-size:20px;
  }
  .sm\:text-\[22px\] {
    font-size:22px;
  }
  .sm\:text-\[24px\] {
    font-size:24px;
  }
  .sm\:text-\[28px\] {
    font-size:28px;
  }
  .sm\:text-\[30px\] {
    font-size:30px;
  }
  .sm\:text-\[36px\] {
    font-size:36px;
  }
  .sm\:text-\[40px\] {
    font-size:40px;
  }
  .sm\:text-\[44px\] {
    font-size:44px;
  }
  .sm\:text-\[56px\] {
    font-size:56px;
  }
  .sm\:text-\[64px\] {
    font-size:64px;
  }
  .sm\:text-\[72px\] {
    font-size:72px;
  }
  .sm\:first\:pl-0:first-child {
    padding-left:0;
  }
}
@media (min-width:1024px) {
  .lg\:sticky {
    position:sticky;
  }
  .lg\:top-\[100px\] {
    top:100px;
  }
  .lg\:top-\[96px\] {
    top:96px;
  }
  .lg\:mx-10 {
    margin-left:2.5rem;
    margin-right:2.5rem;
  }
  .lg\:block {
    display:block;
  }
  .lg\:flex {
    display:flex;
  }
  .lg\:hidden {
    display:none;
  }
  .lg\:h-\[640px\] {
    height:640px;
  }
  .lg\:grid-cols-3 {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .lg\:grid-cols-\[0\.95fr_1\.05fr\] {
    grid-template-columns:.95fr 1.05fr;
  }
  .lg\:grid-cols-\[0\.9fr_1\.1fr\] {
    grid-template-columns:.9fr 1.1fr;
  }
  .lg\:grid-cols-\[1\.15fr_0\.85fr\] {
    grid-template-columns:1.15fr .85fr;
  }
  .lg\:grid-cols-\[1\.1fr_0\.9fr\] {
    grid-template-columns:1.1fr .9fr;
  }
  .lg\:gap-16 {
    gap:4rem;
  }
  .lg\:gap-20 {
    gap:5rem;
  }
  .lg\:p-14 {
    padding:3.5rem;
  }
  .lg\:px-10 {
    padding-left:2.5rem;
    padding-right:2.5rem;
  }
  .lg\:px-12 {
    padding-left:3rem;
    padding-right:3rem;
  }
  .lg\:px-16 {
    padding-left:4rem;
    padding-right:4rem;
  }
  .lg\:py-24 {
    padding-top:6rem;
    padding-bottom:6rem;
  }
  .lg\:pt-10 {
    padding-top:2.5rem;
  }
  .lg\:pt-24 {
    padding-top:6rem;
  }
  .lg\:text-\[30px\] {
    font-size:30px;
  }
  .lg\:text-\[92px\] {
    font-size:92px;
  }
}